<template>
	<view class="login">
		
		<view class="head flex">
			<view class="title" style="padding: 50rpx 0;">
				深圳市起点在线教育科技有限公司
			</view>
		</view>
		<view class="form_content">
			<u--form :model="form" :rules="rules" ref="uForm1" :errorType="errorType">
				<u-form-item label="" prop="mobile" label-width="60" leftIconStyle="width: 40rpx;height: 46rpx"  leftIcon="account" borderBottom>
					<u--input :border="border" :placeholder="defultOne" v-model="form.mobile" type="number"></u--input>
				</u-form-item>
				<u-form-item label="" prop="password" label-width="60" leftIconStyle="width: 36rpx;height: 42rpx" leftIcon="lock" borderBottom>
					<u--input :type="pwdType" :border="border" :placeholder="defultTwo" v-model="form.password"></u--input>
					<view class="eye" slot='right' @tap="changeType">
						<u-icon name="eye" size="30" v-if="isShoweye"></u-icon>
						<u-icon name="eye-off" size="30" v-else></u-icon>
					</view>
				</u-form-item>
			</u--form>
		</view>
		<view class="login-btn">
			<u-button type="primary" shape="circle" text="登录"  @click="loginsubmit"></u-button>
			<view class="reg" v-if="!isCodeLogin && !isVipLogin">
				<u-button type="primary" shape="circle" :plain="true" text="注册" @click="navTo('/pages/login/register')"></u-button>
			</view>
		</view>
		<view class="login-footer">
			<u-divider text="其他方式登录" textPosition="center" textColor="#ADADAD" textSize="20"></u-divider>
		</view>
		<view class="more">
			<view class="more-login flex">
				<!-- <u--image :showLoading="true" src="/static/images/login/wechat.png" width="88rpx" height="88rpx" mode="widthFix" @click="goThreeLogin"></u--image> -->
				<u-icon name="weixin-fill" size="80" color="#1CD66C"></u-icon>
			</view>
		</view>
		
	</view>
</template>

<script>
	// import {loginfunc} from '@/common/fa.mixin.js'
	export default {
		// mixins:[loginfunc],
		data() {
			return {
				account: '',
				account1: '',
				isShoweye: true,
				password: '',
				pwdType: 'password',
				checker: false,
				tips: '',
				isCodeLogin: false,
				isVipLogin: false,
				defultOne: '请输入手机号',
				defultTwo: '请输入密码',
				
				labelPosition: 'top',
				isCodeNum: false,
				border: 'none',
				errorType: 'message',
				form: {
					account: '',
					mobile: '',
					captcha: '',
					password: '',
				},
				rules: {
					mobile: [
						{
							required: true,
							message: '请输入手机号码',
							// 可以单个或者同时写两个触发验证方式
							trigger: ['change', 'blur']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur']
						}
					],
					captcha: [
						{
							required: true,
							message: '请输入验证码',
							trigger: 'change'
						}
					],
					password: [
						{
							required: true,
							message: '请输入密码',
							trigger: 'change'
						}
					],
				},
				isThreeLogin: false,
				userShow: false
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN || APP-PLUS
			this.isThreeLogin = true;
			// #endif
		
			// #ifdef H5
			if (this.$util.isWeiXinBrowser()) {
				this.isThreeLogin = true;
			}
			// #endif
		},
		methods: {
			navTo(url) {
				this.$u.route(url)
				// getApp().globalData.isChangPaw = 2
			},
			changeType() {
				this.isShoweye = !this.isShoweye;
				if (this.pwdType === 'password') return (this.pwdType = 'text');
				this.pwdType = 'password';
			},
			// checkOk() {
			// 	this.checker = !this.checker;
			// },
			// changPass(e) {
			// 	this.password = e.detail.value
			// },
			// agreeClose() {
			// 	this.userShow = false
			// },
			loginsubmit() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.uForm1.validate().then(res => {
					uni.$u.toast('校验成功')
					
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			// toGaoInfo() {
			// 	uni.reLaunch({
			// 		url: '/pages/login/info'
			// 	});
			// },
			// vip登录
			// changeVipLogin() {
			// 	this.isVipLogin = !this.isVipLogin;
			// 	this.isCodeLogin = false
			// 	if(this.isVipLogin) {
			// 		this.defultOne = '请输入志愿卡/升学卡/体验卡号'
			// 		this.defultTwo = '请输入会员卡密码'
			// 	}else {
			// 		this.defultOne = '请输入手机号'
			// 		this.defultTwo = '请输入密码'
			// 	}
				
			// 	this.reset()
			// },
			// 验证码登录
			// changCodeLogin() {
			// 	this.isCodeLogin = !this.isCodeLogin;
			// 	this.reset()
			// },
			// codeChange(text) {
			// 	this.tips = text;
			// },
			// async getCode() {
			// 	if (this.$refs.uCode.canGetCode) {
			// 		// 模拟向后端请求验证码
			// 		if(this.$u.test.mobile(this.form.mobile)) {
			// 			uni.showLoading({
			// 				title: '正在获取验证码'
			// 			})
			// 			setTimeout(() => {
			// 				uni.hideLoading();
			// 				// 这里此提示会被this.start()方法中的提示覆盖
			// 				let obj = {
			// 					mobile: this.form.mobile
			// 				}
							
			// 				if(this.isCodeLogin) {
			// 					obj.event = 'mobilelogin'
			// 				} else {
			// 					obj.event = 'register'
			// 				}
							
			// 				this.$api.sendCode(obj).then(res=>{
			// 					if (!res.code) {
			// 						this.$u.toast(res.msg);
			// 						return;
			// 					}
								
			// 					uni.$u.toast('验证码已发送');
			// 					// 通知验证码组件内部开始倒计时
			// 					this.$refs.uCode.start();
			// 				});
							
							
			// 			}, 2000);
			// 		} else {
			// 			this.$u.toast('手机号码不正确');
			// 		}
			// 	} else {
			// 	  uni.$u.toast('倒计时结束后再发送');
			// 	}
			// },
			reset() {
				this.$refs.uForm1.clearValidate()
			},
			goThreeLogin() {
				// #ifdef MP-WEIXIN
				this.$u.route('/pages/login/wxlogin');
				// #endif
				
				// #ifdef H5
				this.goAuth();
				// #endif
				
				// #ifdef APP-PLUS
				this.goAppLogin();
				// #endif
			},
		}
	}
</script>

<style lang="scss">
	.login {
		padding: 0 54rpx;
		
		.agree {
			&-bg {
				// margin-top: 40rpx;
				padding: 40rpx;
			}
			&-title {
				font-size: 36rpx;
				font-weight: 600; 
				text-align: center;
			}
			&-sub {
				font-size: 32rpx; 
				color: rgb(51, 51, 51); 
				line-height: 48rpx;
				margin-top: 40rpx;
			}
			&-txt {
				color: red;
			}
			&-btn {
				margin-top: 40rpx;
				.custom-style-scla {
					margin-right: 20rpx;
				}
			}
		}
		
		.head {
			flex-direction: column;
			align-items: center;
			padding-top: 24rpx;
			position: relative;
			.title {
				font-size: 40rpx;
				color: #121032;
				font-weight: 700;
				margin-top: 16rpx;
			}
			.back {
				position: absolute;
				right: 0;
				top: 0;
				font-size: 24rpx;
			}
		}
		.form_content {
			margin-top: 100rpx;
			.u-form-item {
				margin-bottom: 20rpx;
			}
		}
		&-type {
			font-size: 24rpx;
			color: #73778A;
			align-items: center;
			justify-content: space-between;
		}
		&-btn {
			margin-top: 86rpx;
			.reg {
				margin-top: 32rpx;
			}
			/deep/ .u-button__text {
				font-size: 32rpx!important;
			}
		}
		&-dec {
			align-items: center;
			margin-top: 32rpx;
			.dec-img {
				padding-right: 10rpx;
			}
			.foot {
				font-size: 24rpx;
				text {
					color: #F44F4F;
					cursor: pointer;
				}
			}
		}
		&-footer {
			margin-top: 100rpx;
		}
		.more {
			padding: 40rpx 0;
			.more-login {
				justify-content: space-around;
			}
		}

	}
</style>
